/*
 * $Id: product.scss 354 2013-01-05 23:45:53Z bobcat $
 * Styles specific to product pages go here. Mobile styles are
 * also specified here, to be overwritten in _queries.scss.
 */

// imports
@import '../main/main';
$blue-button-color: #4682B4;

// elements

// classes
.pdf {
  display: block;
}

.lightbox {
  display: inline-block;
}

.tabs {
  @include clearfix;
  clear: both;
  width: 100%;
}

.tab {
  width: 100%;
  display: inline-block;
  vertical-align: top;

  table {
    width: 90%;
  }

  &.applications > div {
    width: 80%;
  }

  div {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    text-align: left;
  }
}

.images {
  margin-bottom: 5em;
  width: 99%;
  position: relative;

  nav {
    float: left;
    position: absolute;
    top: 100%;

    li {
      margin: .5em .5em .5em 0;
      height: 2.5em;
      display: inline-block;
    }

    img {
      border: $border-width solid $border-color;
      height: 100%;
      width: auto;
    }
  }
}

.gallery {
  article {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    z-index: 0;

    &:first-child {
      z-index: 1;
    }

    img {
      width: 100%;
    }
  }

  :target + article {
    z-index: 9;
  }
}

.product-main {
  margin-bottom: 0;
}

.description {
  p {
    margin-bottom: 1em;
    text-align: left; // better readability
  }
}

.buy {
  td:last-child {
    text-align: center;
  }
}

.quantity {
  width: 4.5em;
}

.tech, .cross-ref {
  table td {
    text-align: left;

    .title {
      text-align: right;
    }
  }
}

.tiny {
  font-size: .75em;
}

.total {
  text-align: right;
}

.none {
  text-align: center;
}

.js {
  .tab h5 {
    display: none;
  }

  .description h5 {
    display: block;
  }
}

// ids
#center-col {
  h2 {
    font-size: 1.25em;
    line-height: 1.4em;
    margin: 1em 0;
  }

  table {
    margin-left: auto;
    margin-right: auto;

    td, th {
      padding: .2em 1em;

      &.tab {
        padding: 0;
        vertical-align: top;
      }
    }

    .title {
      text-align: right;
      font-weight: bold;
    }
  }

  .ratio-container { // only want to select image gallery
    padding-bottom: 68%;

    article {
      border: $border-width solid $border-color;
    }

    section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}

#left-col h2 {
  margin-top: .75em; // trim some excess space
}

#right-col {
  display: none;
}

#related-products {
  margin-top: 4em;

  h3 {
    margin-bottom: 1em;
    text-align: center;
  }

  article {
    @include columnize(2);
    margin: 0 1% 2em 1%;
    display: inline-block;
  }

  img {
    width: 100%;
    height: auto;
    margin-bottom: .25em;
  }

  h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9em;
  }
}

// lightbox plugin
@import 'lightbox';

// media queries
@import 'queries';